<template>
  <div>
    <el-button style="float: right; padding: 3px 0" type="text" @click="getPtps">刷新</el-button>
    <el-table :data="ptps">
      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand expand_ptp_info">
            <el-form-item label="包含的 CTP">
              <span v-for="(i,key) in props.row.ctp" :key="key">{{i}} <el-divider direction="vertical"></el-divider></span>
            </el-form-item>
            <el-form-item label="环回类型">
              <span>{{ props.row['loop-back'] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column property="name" label="名称" sortable width="300px"></el-table-column>
      <el-table-column property="me" label="机框" width="100"></el-table-column>
      <el-table-column property="slot" label="板卡" width="100"></el-table-column>
      <el-table-column width="auto" property="'state-pac'['admin-state']" label="管理配置状态"></el-table-column>
      <el-table-column width="auto" property="statePac.operationalState" label="工作状态"></el-table-column>
      <el-table-column width="auto" property="interface-type" label="接口类型"></el-table-column>
      <el-table-column width="auto" property="laser-status" label="激光器状态"></el-table-column>
      <el-table-column width="auto" property="loop-back" label="环回类型"></el-table-column>
      <el-table-column width="150" property="layer-protocol-name" label="协议层名称"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "PtpList",
  data() {
    return {
      nodeName: '',
      ptps: [
        {
          "interface-type": "UNI",
          "laser-status": "laserOn",
          me: 'otna32432432',
          slot: '1',
          "name": "PTP=/shelf=1/slot=1/subslot=1/port=1",
          "layer-protocol-name": "ETH",
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518
          },
          "loop-back": "内环回",
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          "ctp": ["CTP=8", "CTP=1", "CTP=2", "CTP=3", "CTP=4", "CTP=5"],
          "optical-power-pac": {}
        },
        {
          "interface-type": "UNI",
          "laser-status": "laserOn",
          "name": "PTP=/shelf=1/slot=1/subslot=1/port=2",
          "layer-protocol-name": "ETH",
          me: 'otna',
          slot: '1',
          "acc-eth:eth-ptp-pac": {
            "mac-address": "00:00:00:00:00:00",
            "current-working-mode": "auto",
            "pause-control": true,
            "lldp-enable": false,
            "current-mtu": 1518
          },
          "loop-back": "内环回",
          statePac: {
            "adminState": "enabled",
            "operationalState": 'down',
          },
          "ctp": ["CTP=1", "CTP=6", "CTP=7", "CTP=9", "CTP=11", "CTP=15"],
          "optical-power-pac": {}
        }
      ],
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getPtps() {
      axios.get("/node/" + this.nodeName + "/ptps").then(
          response => {
            console.log("请求成功", response.data);
            this.ptps = response.data;
            // response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
  },
  mounted() {
    this.$bus.$on('node-name', (data) => {
      console.log('PTP - node : ', data);
      let n = data.indexOf('(');
      // console.log('------ n: ',n);
      this.nodeName = data.substring(0, n);
      console.log('------ node: ',this.nodeName);
    })
  }
}
</script>

<style>
.expand_ptp_info > .el-form-item > .el-form-item__content {
  line-height: 60px !important;
}
</style>